<template>
  <div>
    <ul>
      <li>{{ state.a }}</li>
      <li>{{ state.gf.b }}</li>
      <li>{{ state.gf.f.c }}</li>
      <li>{{ state.gf.f.s.d }}</li>
    </ul>
    <button @click="addFn">点击</button>
  </div>
</template>
<script>
import { ref, reactive, shallowReactive, shallowRef, triggerRef } from "vue";

export default {
  /**
   * 非递归监听
   * shallowReactive 只会监听第一层结构的
 
   *
   */
  setup() {
    // const state = shallowRef({
    const state = shallowReactive({
      a: "a",
      gf: {
        b: "b",
        f: {
          c: "c",
          s: {
            d: "d",
          },
        },
      },
    });
    function addFn() {
      /**shallowReactive
       * 那么为什么使用shallowReactive监听第一层后 二三四层的结构也会变化
       * 因为第一层数据改变后ui结构也会随之变化 所以虽然二三四层的结构没被监听但是也会触发ui进行更新
       */
      state.a = 1;
      state.gf.b = 2;
      state.gf.f.c = 3;
      state.gf.f.s.d = 4;
      console.log(state);
      /**shallowRef
       * 不能使用.层层访问的方式去改变值因为shallowRef监听的是value的变化  监听不到value里面值得变化
       *
       * 所以只能通过下面这种方式进行修改
       */
      // state.value = {
      //   a: "1",
      //   gf: {
      //     b: "2",
      //     f: {
      //       c: "3",
      //       s: {
      //         d: "4",
      //       },
      //     },
      //   },
      // };
      /**triggerRef
       * 指定修改内部对象的一个值
       * 注意  指定修改对象内某个固定的值只能使用ref进行监听数据  reactive中暂时没有修改指定对象的值
       */
      // state.value.a = 4;
      // triggerRef(state);
    }
    return {
      state,
      addFn,
    };
  },
};
</script>
